<template>
	<view class="bigBox">
		<navBar isBack title="银行卡管理" backColor="#fff" background="#333333" color="#fff"></navBar>
		<view class="bankCardList" v-for="(item,index) in cardList" :key="index" @click="selectCard(item)">
			<view class="bankTop">
				<!-- <image src="https://manager.ryz1620.com/static/distri/bankLogo.png" mode=""></image> -->
				<view>
					{{item.bank_name}}
					<span>{{item.type==1?'储蓄卡':'信用卡'}}</span>
				</view>
			</view>
			<view class="bankBottom">
				<!-- ··· ··· ··· 6587 -->
				{{item.bank_account}}
			</view>
			<image v-if="delStatus" class="delImg" @click.stop="stopBind(item.id)" :src="`${baseImg}/static/adminShop/delImg.png`" mode=""></image>
		</view>
		<view class="addBtn" @click="addCard">
			<u-icon name="plus" color="#191919" size="36"></u-icon>
			<span>添加银行卡</span>
		</view>
		<view class="addBtn" @click="delCard">
			<u-icon v-if="!delStatus" name="trash" color="#191919" size="36"></u-icon>
			<u-icon v-else name="arrow-left-double" color="#191919" size="36"></u-icon>
			<span>{{delText}}</span>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import service_distri from '@/service/distri.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				cardList:[],
				selectBank:false,
				level:null,
				delStatus:false,
				delText:'删除银行卡'
			}
		},
		onLoad(options) {
			console.log(options,'选择银行卡')
			this.selectBank = options.type=="true"?true:false
			this.level = options.level
			this.getBindCardList()
			console.log(this.level,'角色')
		},
		methods:{
			getBindCardList(){
				let params = {
					level:this.level
				}
				service_distri.getBindCard(params).then(res=>{
					console.log(res,'已绑定银行卡列表')
					if(res.code==1){
						this.cardList = res.data.bank_list?res.data.bank_list:[]
					}
				})
			},
			
			// 绑定银行卡
			addCard(){
				uni.navigateTo({
					url:'bindCard?level='+this.level
				})
			},
			
			// 银行卡解绑
			stopBind(id){
				uni.showModal({
					content:'确定解绑该银行卡吗？',
					success:res=>{
						if(res.confirm){
							service_distri.unBindCard({card_id:id}).then(res=>{
								console.log(res,'解绑结果')
								if(res.code==1){
									this.getBindCardList()
									uni.showToast({
										title:'解绑成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			// 删除银行卡按钮
			delCard(){
				if(this.delStatus){
					this.delStatus = false
					this.delText = '删除银行卡'
				}else{
					this.delStatus = true
					this.delText = '取消删除'
				}
			},
			
			// 选择银行卡到提现页
			selectCard(item){
				console.log(item,'选择的银行卡')
				let num = item.bank_account.split('*')
				console.log(num,'截取')
				if(this.selectBank){
					let nowCardInfo = {
						bank_name:item.bank_name,
						card_id:item.id,
						bank_num:num.slice(-1),
						type:item.type
					}
					console.log(nowCardInfo,'+++++')
					let pages = getCurrentPages();  //获取所有页面栈实例列表
					console.log(pages)
					let nowPage = pages[ pages.length - 1];  //当前页页面实例
					let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
					console.log(prevPage)
					prevPage.$vm.cardInfo = nowCardInfo;
					uni.navigateBack({
						delta: 1
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.bigBox{
		height: 100%;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);		padding-bottom: env(safe-area-inset-bottom); 
	}
	.bankCardList{
		background-color: #fff;
		position: relative;
		width: 702rpx;
		height: 244rpx;
		border-radius: 8rpx;
		background-color: #18B566;
		margin: 40rpx auto;
		display: flex;
		image{width: 68rpx;height: 68rpx;border-radius: 50%;}
		flex-direction: column;
		justify-content: space-between;
		padding: 40rpx 48rpx;
		font: 400 28rpx/40rpx PingFang SC;
		color: #fff;
		.bankTop{
			display: flex;align-items: center;
			view{
				display: flex;
				flex-direction: column;
				margin-left: 14rpx;
				span{font-size: 24rpx; color:rgba(255,255,255,0.6)}
			}
		}
		.bankBottom{
			font: 500 60rpx/60rpx PingFang SC;
			text-align: center;
		}
		.delImg{
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			
		}
	}
	.addBtn{
		padding: 0 40rpx;
		background-color: #F6F7FB;
		width: 702rpx;
		margin: 40rpx auto;
		height: 100rpx;
		border-radius: 16rpx;
		font: 400 32rpx/100rpx PingFang SC;
		color: #333;
		display: flex;
		align-items: center;
		span{margin-left: 12rpx;}
	}
</style>
